/* eslint-disable react/no-children-prop */
// import kbdApprovalService from '@/services/assessmentTracking/testTable';
import { aplanQuery } from '@/services/demo';
import { UploadOutlined } from '@ant-design/icons';
import { EllipsisTableText, FormTable, IFormItem } from '@bud-fe/react-pc-ui';
import { useMount } from 'ahooks';
import { Button, Radio } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import { ColumnsType } from 'antd/lib/table';
import { useEffect, useState } from 'react';
import styles from './index.module.less';

export const AUTH_BTN_CODE = {
  /** 行动计划/跟进事项查询 */
  actionPlanMgt: {
    /** 导出 */
    export: 'action-plan-export',
  },
};

export interface IAplanQueryRespItem {
  id: number;
  employeeNo: string;
  employeeName: string;
  position: string;
  planCatlog: string;
  planCatLogId: number;
  salesName: string;
  planStatus: number;
  postId: number;
  planDesc: string;
  startTime: string;
  endTime: string;
  completeTime: string;
  overtimeIndex: number;
  planType: number;
}

const generateActionBtnList = () => [
  ['view', '查看'],
  ['clash', '冲突'],
];

export default () => {
  useMount(() => {});

  const { search, tableProps, form } = FormTable.useABIFormTable({
    // service: kbdApprovalService.taskTrackList,
    service: aplanQuery,
    pagingParamsFormatter({ current, pageSize }) {
      return { pageNum: current, pageSize };
    },
    multiple: true,
    cacheKey: 'action-plan/list',
  });

  const [size, setSize] = useState<SizeType>('large'); // default is 'middle'

  // 表格 行操作按钮事件
  function handleAction(optType: string, record: any) {
    switch (optType) {
      case 'view':
        console.log(111);
        break;
      case 'clash':
        console.log(222);
        break;
      default:
        break;
    }
  }

  const tableCol: ColumnsType<IAplanQueryRespItem> = [
    {
      title: '二批经销商ID',
      dataIndex: 'id',
    },
    {
      title: '二批经销商名称',
      dataIndex: 'employeeNo',
    },
    {
      title: '(BU)事业部',
      dataIndex: 'position',
    },
    {
      title: '(Region)销售部',
      dataIndex: 'planType',
    },
    {
      title: '(Area)销售片区',
      dataIndex: 'planCatlog',
    },
    {
      title: '(Territory)销售辖区',
      dataIndex: 'salesName',
      align: 'center',
      render: (v) => (v ? EllipsisTableText()(v) : '-'),
    },
    {
      title: '合作类型',
      dataIndex: 'planStatus',
    },
    {
      title: '签约状态',
      dataIndex: 'overtimeIndex',
    },
    {
      title: '销量项兑现率(%)',
      dataIndex: 'startTime',
    },
    {
      title: '管理项兑现率(%)',
      dataIndex: 'endTime',
    },
    {
      title: '综合兑现率(%)',
      dataIndex: 'completeTime',
      align: 'center',
    },
    {
      title: '考核时间',
      dataIndex: 'planDesc',
    },
    {
      title: '操作',
      fixed: 'right',
      dataIndex: 'operation',
      render: (_, record) => (
        <>
          {generateActionBtnList().map(([value, label]) => {
            return (
              <Button key={value} type="link" size="small" onClick={() => handleAction(value, record)}>
                {label}
              </Button>
            );
          })}
        </>
      ),
    },
  ];

  const searchFormCol: IFormItem[] = [
    {
      type: 'input',
      name: 'employeeName',
      label: '二批经销商ID:',
      placeholder: '请输入二批经销商ID',
    },
    {
      type: 'select',
      name: 'planCatlogId',
      label: '二批经销商名称',
      placeholder: '请输入二批经销商名称',
    },
    {
      type: 'select',
      name: 'planCatlogId',
      label: '二批经销商名称组织架构',
      placeholder: '请选择二批经销商名称组织架构',
    },
    {
      type: 'select',
      name: 'planCatlogId',
      label: '合作类型',
      placeholder: '请选择合作类型',
    },
    {
      type: 'select',
      name: 'planCatlogId',
      label: '签约状态',
      placeholder: '请选择签约状态',
    },
    {
      type: 'dateRange',
      name: 'effectTime',
      nameArr: ['startTime', 'endTime'],
      label: '考核时间',
      placeholder: ['开始时间', '结束时间'],
      fieldProps: {
        format: 'YYYY-MM-DD',
        separator: '至',
        allowEmpty: [true, true],
        placeholder: ['开始时间', '结束时间'],
      },
    },
  ];

  const renderActionBar = () => (
    <div className={styles['flexBtn']}>
      <div>
        <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
          <Radio.Button value="large">月度</Radio.Button>
          <Radio.Button value="default">季度</Radio.Button>
          <Radio.Button value="small">年度</Radio.Button>
        </Radio.Group>
      </div>
      <div>
        <Button type="primary" ghost icon={<UploadOutlined />}>
          导出
        </Button>
      </div>
    </div>
  );

  useEffect(() => {
    // console.log(TaskTrackListType);
  }, []);

  return (
    <div className={styles['page-poc-mgt']}>
      <FormTable
        // queryFilterProps={{ optionRender, labelCol: { style: { width: '70px' } } }}
        rowKey="id"
        tableCol={tableCol}
        searchFormCol={searchFormCol}
        actionBar={renderActionBar()}
        search={search}
        form={form}
        // {...newTableProps}
        // {...useCustomPagination(tableProps)}
      />
    </div>
  );
};
